<template>
  <div class="choseWrap">
    <div class="choseTitle topTxt">学生端</div>
    <div class="choseItem">
      <div class="title">
        <img src="../assets/images/ts.png" class="ts_img" alt />
        <span class="fz30-131415">选择类型</span>
      </div>

      <div
        :class="rowNum == 1?'tItem mt20':'tItem mt10'"
        v-for="rowNum in Math.ceil(list.length/4)"
        :key="rowNum"
      >
        <div
          :class="item.isHide?(index==3?'nullItem':'nullItem mr10'):(index==3?'pItem':'pItem mr10')"
          @click="item.isHide?null:selectPart(item.partId)"
          v-for="(item,index) in list.slice((rowNum-1)*4,(rowNum-1)*4+4)"
          :key="item.partid"
        >
          <img v-if="!item.isHide" :src="picUrl+item.fileName" class="xg_img" alt />
          <span v-if="!item.isHide" class="fz19">{{item.name}}</span>
        </div>
        <!-- <div v-if="(rowNum==Math.ceil(list.length/4))&&list.length!=rowNum*4">
                    <div :class="((col_empty+list.length)!=rowNum*4)?'nullItem mr10':'nullItem'" v-for="col_empty in (Math.ceil(list.length/4)*4-list.length)" :key="col_empty">

                    </div>
        </div>-->
      </div>

      <!-- <div class="tItem mt20">
                <div class="pItem mr10" @click="selectPart(1)">
                    <img src="images/xg.png" class="xg_img" alt="">
                    <span class="fz19">语素意识干预</span>
                </div>
                <div class="pItem mr10" @click="selectPart(2)">
                    <img src="images/ys.png" class="xg_img" alt="">
                    <span class="fz19">语音意识干预</span>
                </div>
                <div class="pItem mr10" @click="selectPart(3)">
                    <img src="images/yd.png" class="xg_img" alt="">
                    <span class="fz19">阅读流畅性</span>
                </div>
                <div class="pItem" @click="selectPart(4)">
                    <img src="images/zz.png" class="xg_img" alt="">
                    <span class="fz19">正字法意识干预</span>
                </div>
            </div>
            <div class="tItem mt10">
                <div class="pItem mr10" @click="selectPart(5)">
                    <img src="images/sz.png" class="xg_img" alt="">
                    <span class="fz19">识字量测试</span>
                </div>
                <div class="pItem mr10" @click="selectPart(6)">
                    <img src="images/zl.png" class="xg_img" alt="">
                    <span class="fz19">智力测试</span>
                </div>
                <div class="nullItem mr10">
                
                </div>
                <div class="nullItem">
                    
                </div>
      </div>-->
    </div>
  </div>
</template>
<style lang="css">
.choseWrap {
  width: 100%;
  height: 100%;
}
.choseWrap .choseTitle {
  width: 100%;
  height: 0.72rem;
  background: rgba(255, 213, 128, 1);
  display: flex;
  align-items: center;
  padding-left: 0.25rem;
  box-sizing: border-box;
}
.choseWrap .choseItem {
  width: 100%;
  background: rgba(255, 241, 209, 1);
  padding: 0.25rem 0.38rem;
  box-sizing: border-box;
}
.choseWrap .choseItem .title {
  display: flex;
  align-items: center;
}
.choseItem .title .ts_img {
  width: 0.13rem;
  height: 0.13rem;
  margin-right: 0.08rem;
}
.choseItem .tItem {
  display: flex;
  justify-content: space-between;
}
.choseItem .tItem .pItem {
  height: 2.33rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0.03rem 0.12rem 0px rgba(224, 156, 16, 0.4);
  border-radius: 0.13rem;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.choseItem .tItem .nullItem {
  height: 2.33rem;
  background: rgba(255, 255, 255, 0);
  border-radius: 0.13rem;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.choseItem .tItem.length {
  width: 50%;
}
.tItem .pItem .xg_img {
  width: 1.09rem;
  height: 1.12rem;
  margin-top: 0.4rem;
  margin-bottom: 0.3rem;
}
.topTxt {
  font-size: 0.18rem;
  color: #0f1011;
  line-height: 0.8rem;
}
</style>
<script>
export default {
  data() {
    return {
      list: [],
      picUrl: ""
    };
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      this.$api.unit.partList().then(res => {
        if (res.data.status == 1) {
          this.list = res.data.data.list;
          let total = Math.ceil(this.list.length/4)*4;
          if(total>this.list.length){
              var len = total-this.list.length;
              for(var i=0;i<len;i++){
                  var item ={};
                  item.isHide = true;
                  this.list.push(item);
              }
          }
          this.picUrl = res.data.data.picUrl;
        }
      });
    },
    selectPart(partId) {
      this.$router.push({ name: "group", query: { partId: partId } });
    }
  }
};
</script>